// this is an IIFE function which executes itself at the moment
// in this case, its purpose is to add scope to all variable or they will be
// accessible from the whole browser (including another javascript files)
(function () {
    // all variables are always accessible from the whole scope (even before their initialization)
    // so all of them should be initialized at the beginning of the function to mention that
    // after their initialization (at the top) they have default value as 'undefined'
    var fragment,
        firstDiv,
        secondDiv,
        thirdDiv;

    fragment = document.createDocumentFragment(); // creating a virtual html element used for container of html elements

    firstDiv = document.createElement('div'); // creating a casual div element
    firstDiv.innerText = calculateCircleArea(7); // with innerText
    fragment.appendChild(firstDiv);

    secondDiv = firstDiv.cloneNode(true); // this is cloning the structure of the first div for performance
    secondDiv.innerHTML = calculateCircleArea(1.5); // with innerHTML (in this case is not the best solution)
    fragment.appendChild(secondDiv);

    thirdDiv = firstDiv.cloneNode(true);
    thirdDiv.innerText = calculateCircleArea(20);
    fragment.appendChild(thirdDiv);

    document.body.appendChild(fragment); // adding the content of the virtual element to the body element

    function calculateCircleArea(r) {
        return Math.PI * Math.pow(r, 2);
    }
}());